<template>
	<view class="container">
		<view class="wrapper">
			<view class="form">
				<u-form :model="form" ref="uForm" :error-type="['border-bottom','toast']">
					<u-form-item label="账号" prop="mobile">
						<u-input v-model="form.account" placeholder="请输入账号" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input type="password" v-model="form.password" placeholder="请输入密码" />
					</u-form-item>
				</u-form>
			</view>
			<button class="confirm-btn" :class="isDisable ? 'disable':''" @click="toSubmit">
				<u-loading mode="flower" :show="isLoading"></u-loading> 登录
			</button>
			<view style="margin-top: 32px;text-align: center">
				<view>
					没有账号？
					<text style="color: #e10a07" @click="register()">立即注册</text>
				</view>
				<view style="margin-top: 30rpx;">
					忘记密码？
					<text style="color: #e10a07" @click="forget()">找回密码</text>
				</view>
			</view>
		</view>
		<view class="quick-login">
			<view class="title">
				<text>————— 快捷登陆 —————</text>
			</view>
			<view class="icons">
				<u-icon class="ql-icon" name="weixin-circle-fill" color="rgb(4,174,15)" size="86"></u-icon>
				<u-icon class="ql-icon" name="qq-circle-fill" color="rgb(74,154,253)" size="86"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			isDisable() {
				return this.form.account.length < 1 ||
					this.form.password.length < 1 || this.isLoading;
			}
		},
		data() {
			return {
				rules: {
					account: [{
							required: true,
							message: '请输入账号',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur']
					},
				},
				form: {
					account: '13616000025',
					password: 'xm123456',
				},
				isLoading: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			forget() {
				this.$myRouter.push({
					name: 'index/forget'
				})
			},
			register() {
				this.$myRouter.push({
					name: 'index/register'
				})
			},
			toSubmit() {
				let that = this
				if (that.isDisable || that.isLoading) {
					return false
				}
				that.isLoading = true


				that.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						that.loginUser()

					} else {
						console.log('验证失败');
					}

					setTimeout(function() {
						that.isLoading = false
					}, 3000);
				});
			},
			async loginUser() {
				try {
					const response = await this.$api.user.login(this.form)
					console.log('++++++++++',response)
					if (response.code === 1) {
						const userInfo = response.data.userinfo
						console.log('++++++++++',response.data.userinfo)
						// 保存用户信息到 Vuex 和 localStorage
						this.$store.commit('setUserInfo', userInfo)
						console.log('登录成功:', userInfo)
						uni.switchTab({
							url:'/pages/member/index'
						})
						// 跳转或其他操作
					} else {
						console.error('登录失败:', response.msg)
					}
				} catch (error) {
					console.error('登录请求失败:', error)
				}
			},
			getUserInfo(userId, token) {

			}
		},

	}
</script>

<style lang='scss'>
	@import '@/static/css/login.scss';

	.quick-login {
		.title {
			color: #AAA;
		}

		.icons {
			margin-top: 30rpx;

			.ql-icon {
				margin-left: 30rpx;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}
</style>